const path = require('path')
const files = require.context('./template', false, /\.vue$/)
const modules = {}
const componentsList = []
files.keys().forEach(key => {
  const name = path.basename(key, '.vue')
  modules[`${name}Temp`] = files(key).default || files(key)
  componentsList.push(`${name}Temp`)
})

export default {
  name: 'Menu',
  components: {
    ...modules
  },
  render: function(h) {
    const _this = this
    const colList = []
    componentsList.forEach((item) => {
      const component = h(`${item}`, {
        on: {
          dragstart(e) {
            this.$emit('dragstart', e)
          },
          dragend(e) {
            this.$emit('dragend', e)
          }
        }
      })
      const col = h('el-col', {
        style: {
          marginBottom: '10px'
        },
        props: {
          span: 8
        }
      }, [component])
      colList.push(col)
    })
    return h('el-row', {
      ref: 'menu',
      style: {
        marginLeft: 0,
        marginRight: 0
      },
      props: {
        gutter: 10
      },
      nativeOn: {
        dragstart: (e) => {
          _this.$emit('ondragstart', e)
        },
        dragend: (e) => {
          _this.$emit('dragend', e)
        }
      }
    }, [colList])
  }
}
